<template>
	<view class="app_Cont">
		<scroll-view class="showCont" scroll-y="true" @scrolltolower="scrolltolower" lower-threshold="10" v-if="showCont">
			<view class="headCar">
				<view class="carInfo">
					<view class="comName">{{formData.enterprise_name}}</view>
					<view class="comTel">
						<view class="iconfont icon-gangwei"></view>
						<view class="telNum">高级招聘经理 · {{formData.enterprise_person}}</view>
					</view>
					<view class="comTel" @click="telFn">
						<view class="iconfont icon-24gl-phoneLoudspeaker"></view>
						<view class="telNum">{{mdPhone()}}</view>
					</view>
					<view class="comTel" v-if="formData.enterprise_address">
						<view class="iconfont icon-dizhi"></view>
						<view class="telNum">{{formData.enterprise_address}}</view>
					</view>
				</view>
				<view class="comImg">
					<image :src="formData.enterprise_logo"></image>
				</view>
			</view>
			<view class="comWork">
				<view class="serchNav">
					<view class="serchLeft">
						<view class="shuTag"></view>
						<view class="serchLeftText">发布情况</view>
					</view>
				</view>
				<view class="workCont">
					<view class="workItem" @click="detailFn(item)" :key="index" v-for="(item,index) in listArr">
						<view class="workHead">
							<view class="workNameInfo">
								<view class="workName" v-if="item.watercraft_area">{{item.watercraft_area}}</view>
								<view class="headShu" v-if="item.watercraft_area"></view>
								<view class="workName">{{item.position_name}}</view>
								<view class="workTag" v-if="item.position_type==2">急聘</view>
							</view>
							<view class="workMoney">
								<text v-if="item.start_monry=='0'">面议</text>
								<text v-else>{{item.start_monry}}~{{item.end_monry}}{{item.unit==1?'元':'美元'}}</text>
							</view>
						</view>
						<view class="workInfo">
							<view class="workDes">
								<view class="workDesItem" v-if="item.watercraft_num">{{item.watercraft_num}}{{item.watercraft_dw}}</view>
								<view class="workDesItem" v-if="item.watercraft_type">{{item.watercraft_type}}</view>
							</view>
						</view>
						<view class="workTags">
							<view class="tagItem" v-if="item.zsdj">{{item.zsdj}}</view>
							<view class="tagItem" v-if="item.gzjy">{{item.gzjy}}</view>
							<view class="tagItem" v-if="item.xlyq">{{item.xlyq}}</view>
							<view class="tagItem" v-if="item.nlyq">{{item.nlyq}}</view>
							<view class="tagItem" v-if="item.gwfl" :key="index2" v-for="(item2,index2) in item.gwfl.split(',')">{{item2}}</view>
						</view>
					</view>
					<noData v-if="listArr.length==0&&!isChange"></noData>
					<loadMore v-if="!isChange&&last_page==page"></loadMore>
					
				</view>
			</view>
		</scroll-view>
		<load v-if="!showCont||isChange"></load>
		<u-modal :show="showModal" :showCancelButton="true" @cancel="showModal = false" title="温馨提示" @confirm="modalSure"  :content='modalCont'></u-modal>
	</view>
</template>

<script>
	import api from '@/http/api.js'
	import noData from '@/components/noData.vue'
	import load from '@/components/load.vue'
	import loadMore from '@/components/loadMore.vue'
	export default {
		components:{load,noData,loadMore},
		data() {
			return {
				showCont:false,
				showModal:false,
				modalCont:'',
				detailId:'',
				enterprise_id:'',
				formData:'',
				is_deliver:1,
				page:1,
				per_page:10,
				last_page:0,
				isChange:false,
				listArr:[],
			};
		},
		methods:{
			mdPhone(){
				return this.formData.enterprise_mobile.replace(
				  /(\d{3})\d{4}(\d{4})/,
				  "$1****$2"
				);
			},
			scrolltolower(){
				if(this.page<this.last_page){
					this.page++
					this.isChange = true
					this.getData()
				}
			},
			modalSure(){
				uni.navigateTo({
					url: '/pages/user/book/book'
				});
			},
			telFn(){
				if(this.is_deliver==1){
					this.showModal = true
					this.modalCont = '请先完善简历再联系此岗位。'
				}else{
					uni.makePhoneCall({
						phoneNumber:this.formData.enterprise_mobile,
					})
				}
			},
			detailFn(item){
				uni.navigateTo({
					url: '../workDetail/workDetail?id='+item.enterprise_position_id
				});
			},
			getData(){
				let data = {
					page:this.page,
					per_page:this.per_page,
					enterprise_id:this.enterprise_id,
				}
				api.getRequst(data,'/api/Index/enterprisePositionInfo').then((res)=>{
					if(res.code==1){
						let arr = res.data.data
						for(let item of arr){
							this.listArr.push(item)
						}
						this.last_page = res.data.last_page
					}
					this.showCont = true
					this.isChange = false
				})
			},
			getComInfo(){
				let data = {
					enterprise_position_id:this.detailId,
				}
				api.getRequst(data,'/api/Index/enterpriseInfo').then((res)=>{
					if(res.code==1){
						this.formData = res.data
						this.getData()
					}
				})
			}
		},
		onLoad(option) {
			this.enterprise_id = option.enterprise_id
			this.is_deliver = option.is_deliver
			this.detailId = option.id
			this.getComInfo()
		}
	}
</script>

<style lang="less">
.showCont{
	padding-top: 30rpx;
	box-sizing: border-box;
	height: 100vh;
	background-color: #f6f7f9;
	overflow-y: auto;
	.headCar{
		width: 92%;
		background-image: linear-gradient(to right bottom,#89afff,#3f55cc);
		margin: 0 auto;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		color: #fff;
		display: flex;
		align-items: flex-start;
		.carInfo{
			width: 100rpx;
			flex: 1;
			.comName{
				font-weight: bold;
				font-size: 32rpx;
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.comTel{
				display: flex;
				align-items: center;
				margin-top: 15rpx;
				.iconfont{
					margin-right: 15rpx;
				}
				.telNum{
					width: 100rpx;
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
		.comImg{
			width: 120rpx;
			height: 120rpx;
			background-color: #fff;
			padding: 3rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	}
	.comWork{
		width: 100%;
		padding: 30rpx 4%;
		box-sizing: border-box;
	}
	.serchNav{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		.serchLeft{
			display: flex;
			position: relative;
			font-size: 30rpx;
			.serchLeftText{
				position: relative;
				z-index: 2;
				font-weight: bold;
			}
			.shuTag{
				height: 10rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 120rpx;
				background-image: linear-gradient(to right,white,#3f55cc);
			}
		}
	}
	.workCont{
		width: 100%;
		padding-top: 10rpx;
		.workItem{
			background-color: #fff;
			padding: 30rpx 4% 20rpx;
			margin-top: 30rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			.workHead{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.workNameInfo{
					display: flex;
					align-items: center;
					.workName{
						font-size: 32rpx;
						font-weight: bold;
					}
					.headShu{
						width: 4rpx;
						border-radius: 4rpx;
						background-color: #333;
						height: 24rpx;
						margin: 0 15rpx;
					}
					.workTag{
						padding: 5rpx 20rpx;
						font-size: 24rpx;
						// border: 1px solid #f56c6c;
						// background-color: ;
						background-image: linear-gradient(to right, #f56c6c,#ebc0b4);
						color: #fff;
						// margin-left: 10rpx;
						border-radius: 20rpx 0 20rpx 0;
						transform: scale(0.85);
					}
				}
				.workMoney{
					color: #3f55cc;
					font-size: 30rpx;
				}
			}
			.workTags{
				display: flex;
				// margin: 10rpx 0;
				flex-wrap: wrap;
				.tagItem{
					margin-bottom: 15rpx;
					padding: 5rpx 20rpx;
					background-color:#dae3fb;
					color: #3f55cc;
					font-size: 26rpx;
					border-radius: 0rpx 25rpx 0rpx 0rpx;
					margin-right: 20rpx;
				}
			}
			.workInfo{
				width: 100%;
				margin-bottom: 20rpx;
				.workDes{
					width: 100%;
					display: flex;
					align-items: center;
					margin: 10rpx 0;
					.workDesItem{
						font-size: 26rpx;
						color: #999;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
}
</style>
